<template>
    <div>

        <!--基本表单-->
        <el-form :model="skuForm" label-width="150px">

            <el-form-item label="sku名称">
                <el-input v-model="skuForm.subtitle"/>
            </el-form-item>

            <el-form-item label="商品价格">
                <el-input v-model="skuForm.price"/>
            </el-form-item>

            <!--<el-form-item label="商品重量（千克)">-->
                <!--<el-input v-model="skuForm.weight"/>-->
            <!--</el-form-item>-->

            <!--<el-form-item label="商品规格描述">-->
                <!--<el-input v-model="skuForm.skuDesc" :rows="5" type="textarea"/>-->
            <!--</el-form-item>-->

            <el-form-item label="商品图片">
                <el-upload
                        :on-success="onUploadSuccessProduct"
                        :before-upload="beforeUpload"
                        :on-preview="onUploadPreview"
                        :on-remove="onUploadRemove"
                        :multiple="true"
                        :action="'api/file/upload'"
                        class="upload-demo"
                        list-type="picture-card">
                    <i class="el-icon-plus"/>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且不超过2MB</div>
                </el-upload>
            </el-form-item>

        </el-form>

        <!--平台属性表单-->
        <el-form :model="skuForm" :inline="true" label-width="150px" class="demo-form-inline">
            <el-form-item
                    v-for="(attrInfo, index) in attrInfoList"
                    :key="attrInfo.id"
                    :label="attrInfo.name">

                <el-select
                        v-model="skuAttrValueListTemp[index]"
                        placeholder="请选择">
                    <el-option
                            v-for="item in attrInfo.attrValueList"
                            :key="item.id"
                            :label="item.attrValue"
                            :value="attrInfo.id+'|'+item.attrValue"/>
                </el-select>
            </el-form-item>
        </el-form>

        <!--销售属性表单-->
        <el-form :model="skuForm" :inline="true" label-width="150px" class="demo-form-inline">
            <el-form-item
                    v-for="(saleAttr, index) in saleAttrList"
                    :key="saleAttr.saleAttrId"
                    :label="saleAttr.saleAttrName">

                <el-select
                        v-model="skuSaleAttrValueListTemp[index]"
                        placeholder="请选择">
                    <el-option
                            v-for="spuSaleAttrValue in saleAttr.spuSaleAttrValueList"
                            :key="spuSaleAttrValue.id"
                            :label="spuSaleAttrValue.saleAttrValueName"
                            :value="spuSaleAttrValue.id+'|'+spuSaleAttrValue.saleAttrValueName+'|'+ saleAttr.saleAttrId+'|'+saleAttr.saleAttrName"/>
                </el-select>
            </el-form-item>

            <el-form-item label="商品概述">
                <el-upload
                        :on-success="onUploadSuccess"
                        :before-upload="beforeUpload"
                        :on-preview="onUploadPreview"
                        :on-remove="onUploadRemove"
                        :multiple="true"
                        :action="'api/file/upload'"
                        class="upload-demo"
                        list-type="picture-card">
                    <i class="el-icon-plus"/>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且不超过2MB</div>
                </el-upload>
            </el-form-item>
        </el-form>


        <!-- 图片列表 -->
        <el-table
                v-loading="skuImageListLoading"
                ref="skuImageListTable"
                :data="skuImageList"
                element-loading-text="数据正在加载......"
                border
                fit
                highlight-current-row
                @selection-change="handleSelectionChange">
            <el-table-column align="center" label="序号" width="100">
                <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column label="图片" width="200">
                <template slot-scope="scope">
                    <img :src="scope.row.image" :alt="scope.row.image" style="width: 100px;height: 100px">
                </template>
            </el-table-column>

            <el-table-column
                    type="selection"
                    width="55"/>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.default" size="mini" type="success">默认</el-tag>
                    <el-button v-else type="primary" size="mini" @click="setDefault(scope.row)">设为默认</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--表单按钮-->
        <el-form :model="skuForm" label-width="150px">
            <!--按钮-->
            <div style="margin-top:22px;">
                <el-button type="primary" size="mini" @click="saveSkuInfo()">保存</el-button>
                <el-button type="default" size="mini" @click="backToSpuList()">返回</el-button>
            </div>
        </el-form>

    </div>
</template>
<style>
    .aa:after{
        display: block;
        width: 100%;
    }
</style>
<script>


    export default {

        props: {
            catalogId: {
                type: String,
                default: null
            },
            spuId: {
                type: String,
                default: null
            },
            spuName: {
                type: String,
                default: null
            }
        },

        data() {
            return {
                // 图片预览区域url
                dialogImageUrl: '',
                // 图片预览对话框
                dialogImageVisible: false,
                // Sku表单数据
                skuForm: {},
                // 平台属性列表数据
                attrInfoList: [],
                // 销售属性列表数据
                saleAttrList: [],
                // 图片列表数据
                skuImageList: [],
                // 图片列表多选选中的数据
                multipleSelectionSkuImageList: [],
                skuImageListLoading: false,

                // 当前sku的平台属性：格式：attrId|valueId
                skuAttrValueListTemp: [],
                // 当前sku的销售属性：格式：saleAttrValueId|saleAttrValueName|saleAttrId|saleAttrName
                skuSaleAttrValueListTemp: []
            }
        },

        methods: {
            onUploadSuccessProduct(res, file){
                this.skuForm.mainImage='/api/file/download?uniFileName='+file.response.data
                },
// 文件上传限制条件
            beforeUpload(file) {
                const isJPG = file.type === 'image/jpeg'
                const isPNG = file.type === 'image/png'
                const isGIF = file.type === 'image/gif'
                const isLt2M = file.size / 1024 / 1024 < 2

                if (!isJPG && !isPNG && !isGIF) {
                    this.$message.error('上传头像图片只能是 JPG、PNG 或 GIF 格式!')
                    return false
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!')
                    return false
                }
                return true
            },

            // 上传图片成功的回调
            onUploadSuccess(res, file) {
                // 填充上传文件列表
                let cc=res;
                let bb=file;
                this.skuForm.imgs.push({
                    //imgName: file.name,
                    image: '/api/file/download?uniFileName='+file.response.data
                })
            },

            // 上传的文件预览
            onUploadPreview(file) {
                this.dialogImageUrl = file.url
                this.dialogImageVisible = true
            },

            // 删除上传的文件
            onUploadRemove(file, fileList) {
                this.spuForm.spuImageList = []
                fileList.forEach(file => {
                    this.spuForm.spuImageList.push({
                        imgName: file.name,
                        imgUrl: '/api/file/download?uniFileName='+file.response.data
                    })
                })
            },
            load(productId){
              this.axios.get("/admin/getProductAll/"+productId).then(res=>{
                 this.skuForm= res
                  // 图片预览区域url
                  this.dialogImageUrl=res.mainImage
                      // 图片预览对话框
                   this.dialogImageVisible=true
                  this.skuImageList=res.imgs;
              })
            },
            init(categoryId) {
                // Sku表单数据
                this.skuForm = {
                    id: null,
                    price: null,
                    subtitle: null,
                    weight: null,
                    skuDesc: null,
                    name:null,
                    categoryId: categoryId,
                    mainImage:null,
                    skuAttrValueList: [],
                    imgs:[],
                }

                // 获取平台属性列表
                this.axios.get('/admin/attrInfoValueAll/' + categoryId).then(res => {
                    this.attrInfoList = res
                })
                // this.getAttrInfoList()
                // // 获取销售属性列表
                // this.getSaleAttrList(spuId)
                // this.axios.get('admin/getByProductId/' + categoryId).then(res => {
                //     this.skuImageList = res
                // })
                // // 获取图片列表
                // this.getSpuImageList(spuId)
            },

            // 获取平台属性列表
            getAttrInfoList() {
                // 查询数据
                prop.getAttrInfoList(this.catalogId).then(response => {
                    this.attrInfoList = response.data
                })
            },

            // 获取销售属性列表
            getSaleAttrList(spuId) {
                // 查询数据
                spu.getSpuSaleAttrList(spuId).then(response => {
                    this.saleAttrList = response.data
                })
            },

            // 获取图片列表
            getSpuImageList(spuId) {
                // 查询数据
                spu.getSpuImageList(spuId).then(response => {
                    this.skuImageList = response.data
                })
            },

            // 设为默认
            setDefault(row) {
                this.skuImageList.forEach(skuImage => {
                    skuImage.default = false
                })
                row.default = true
            },

            // 图片多选的数据
            handleSelectionChange(val) {
                this.multipleSelectionSkuImageList = val
            },

            // 保存Sku
            saveSkuInfo() {
                // 填充平台属性
                this.skuForm.skuAttrValueList = []
                this.skuAttrValueListTemp.forEach(skuAttrValueTemp => {
                    const arr = skuAttrValueTemp.split('|')
                    const skuAttrValue = {
                        //productId:this.skuForm.
                        attrId: arr[0],
                        value: arr[1]
                    }
                    this.skuForm.skuAttrValueList.push(skuAttrValue)
                })
                this.skuForm.name=this.skuForm.subtitle
                this.axios.post("/admin/saveProduct",this.skuForm).then(res=>{
                    // 调用父组件监听函数
                    this.$emit('listenOnSave')
                });

            },

            // 返回Spu列表页面
            backToSpuList() {
                this.$emit('listenOnClose')
            }
        }
    }
</script>

